<template>
  <a-row id="globalHeader" align="center">
    <!-- 顶部左侧菜单栏 -->
    <a-col flex="auto">
      <a-menu mode="horizontal"
              :default-selected-keys="['1']" class="menu"
              @menu-item-click="doMenuClick"
              :selectedKeys="selectedKeys">
        <!-- 标题 -->
        <a-menu-item key="0" :style="{ padding: 0, marginRight: '38px' }" disabled>
          <div class="title-bar">
            <img class="logo" src="../assets/logo.png" alt="logo">
            <div class="title">智能刷题学习平台</div>
          </div>
        </a-menu-item>
        <!-- 列表渲染导航栏 -->
        <a-menu-item v-for="item in visibleRoutes" :key="item.path">
          {{ item.name }}
        </a-menu-item>
      </a-menu>
    </a-col>
    <!-- 顶部右侧登录按钮 -->
    <a-col flex="200px">
      <div v-if="loginUserStore.loginUser.id > 0">
        <a-popover position="bottom">
          <!-- 悬停触发区域 -->
          <template #content>
            <div>
              <a-button
                  type="text"
                  @click="goToProfile"
                  style="padding: 0 8px"
              >
                个人中心
              </a-button>
            </div>
            <div>
              <a-button
                  v-if="loginUserStore.loginUser.userRole==='admin'"
                  type="text"
                  @click="goToAdmin"
                  style="padding: 0 8px"
              >
                管理中心
              </a-button>
            </div>
            <div>
              <a-button
                  type="text"
                  status="danger"
                  @click="clickLogout"
                  style="padding: 0 8px"
              >
                退出登录
              </a-button>
            </div>
          </template>

          <!-- 用户名展示 -->
          <UserAvatar
              :user-id="loginUserStore.loginUser.id"
              :avatar-size="32"
              :font-size="10"
          />
        </a-popover>
      </div>
      <div v-else>
        <RouterLink to="/user/login">
          <a-button type="primary">登录</a-button>
        </RouterLink>
      </div>
    </a-col>
  </a-row>
</template>
<script setup>
import { computed, ref } from "vue";
import { routes } from "@/router/router";
import { useLoginUserStore } from "@/store/userStore";
import { useRouter } from "vue-router";
import { userLogoutUsingPost } from "@/api/UserRequest";
import UserAvatar from "@/components/UserAvatar.vue";

const router = useRouter();
const loginUserStore = useLoginUserStore();
// 当前选中的菜单项
const selectedKeys = ref(["/"]);
// 路由跳转时，自动更新选中的菜单项
router.afterEach((to) => {
  selectedKeys.value = [to.path];
});


// 遍历routes中的路由并进行显示
const visibleRoutes = computed(() => {
  return routes.filter((item) => {
    if (item.meta?.menu==='home') {
      return true;
    }
    return false;
  });
});

// 点击菜单后更改路由
const doMenuClick = (key) => {
  router.push({
    path: key,
  });
};

// 退出登录
const clickLogout = async () => {
  await userLogoutUsingPost();
  loginUserStore.clearLoginUser();
  router.push("/user/login");
}

// 跳转到个人中心
const goToProfile = () => {
  router.push("/userProfile");
}

function goToAdmin(){
  router.push("/admin/home")
}
</script>
<style scoped>
.title-bar {
  display: flex;
  align-items: center;
}

.username-hover {
  cursor: pointer;
  transition: all 0.3s;
  padding: 8px;
  border-radius: 4px;
  margin-right: 20px;
}

.title {
  color: black;
  margin-left: 16px;
}

.logo {
  height: 48px;
}
</style>